<template>
  <div class="thread-content-wrapper">
    <div v-for="(thread,index) in threads" class="content-wrapper">
      <div class="title-wrapper">
        <div class="title" @click="goTo('/forum/post/',thread)">{{thread.title}}</div>
        <div class="auth">{{thread.nickName}}</div>
      </div>
      <div class="content">
        <div v-if="!thread.showAllContent" class="content-br">
          <label>{{thread.status}}</label>
          <span>{{thread.partContent}}...</span>
          <a v-if="thread.showAllButton" href="javascript:void(0)" @click="showOrHide(thread)">{{thread.showDescription}}</a>
        </div>
        <div v-if="thread.showAllContent" class="content-br">
          <label>{{thread.status}}</label>
          <span>{{thread.content}}</span>
          <a v-if="thread.showAllButton" href="javascript:void(0)" @click="showOrHide(thread)">{{thread.showDescription}}</a>
        </div>
      </div>
      <div class="thread-footer">
        <div class="thread-group">
          <span v-if="!params.threadGroup">{{thread.threadGroup}}</span>
        </div>
        <div class="up-and-results">
          <span>asd</span>
          <span>asd</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  /* eslint-disable no-unneeded-ternary */

  import { THREAD_LIST_URL } from '../../../common/js/url'
  export default {
    props: {
      group: {
        type: String
      }
    },
    data () {
      return {
        threads: [],
        params: {
          content: '',
          threadGroup: this.group
        }
      }
    },
    mounted: function () {
      this.queryThreads()
    },
    methods: {
      goTo (url, thread) {
        this.$router.push({path: url, query: thread})
      },
      callBack (content) {
        this.params.content = content ? content : ''
        this.queryThreads()
      },
      queryThreads () {
        this.$http.get(THREAD_LIST_URL, {params: this.params}).then(response => {
          this.threads = response.data.data.map(data => { // 这里不要先对threads赋值，然后对threads进行map继续赋值给threads。这样做的结果是上面的收起和展开无法起作用。目前没发现问题出在哪里
            if (data.content.length > 200) {
              data.partContent = data.content.substring(0, 200)
              data.showAllContent = false // 这个字段决定是否显示全部内容
              data.showAllButton = true // 这个字段决定是否有显示全部的按钮
              data.showDescription = '显示全文'
            } else {
              data.showAllContent = true // 这里必须赋值，否则vue判定 !data.showAllContent 依然是true
            }
            return data
          })
        })
      },
      showOrHide (thread) {
        if (thread.showAllContent) {
          thread.showDescription = '显示全文'
          thread.showAllContent = false
        } else {
          thread.showDescription = '收起全文'
          thread.showAllContent = true
        }
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/style/common.styl";
  @import "fThread.styl";
</style>
